<template>
    <el-scrollbar class="menu" wrap-style="overflow-x:hidden;">
      <div class="flex_ctr menu__img menu__img_short" v-if="$store.state.fold">
        <el-image :src="logoUrl[0]" fit="contain"></el-image>
      </div>
      <div class="flex_ctr menu__img menu__img_full" v-else>
        <el-image :src="logoUrl[1]" fit="contain"></el-image>
      </div>

      <el-menu 
        class="border-none"
        router
        text-color="#bfcbd9"
        background-color="#304156"
        :collapse="$store.state.fold"
      >
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/bingleMaps">
          <i class="el-icon-map-location"></i>
          <span slot="title">地图导航</span>
        </el-menu-item>
        <el-menu-item index="/dataVis">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">数据可视化</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>

</template>

<script>
export default {
  data(){
    return {
      logoUrl: [
        require('../../assets/imgs/logo_short.png'),
        require('../../assets/imgs/logo_full.png'),
      ],
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  methods: {
    getBreadcrumb(){
      let matched = this.$route.matched;
      if (matched[0].meta.title != '首页') { matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched); }
      this.$store.commit('setBreadcrumb', matched)
    },
  }
}
</script>

<style>
.menu{
  height: 100%;
  background-color: #304156;
}
.menu__img{
  height: 60px;
  transition: width 0.5s, transform 0.5s;
}
.menu__img_short{ width: 64px; }
.menu__img_full{ width: 200px; }

.el-image{
  margin: 10px;
  height: calc(100% - 20px);
}
</style>